<template>
    <el-form :model="formData" ref="formRef" label-width="5rem">
        <el-row type="flex" :gutter="10">
            <el-col :span="12">
                <el-form-item label="时间区间" prop="daterange">
                    <el-date-picker
                        v-model="formData.daterange"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="关键字" prop="quick_search">
                    <el-input
                        v-model="formData.quick_search"
                        placeholder="请输入关键字"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >确认</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
export default {
    name: "reservation-search",
    data() {
        return {
            formData: {
                daterange: [],
                quick_search: ""
            }
        };
    },
    methods: {
        onConfirm() {
            this.$emit("search", this.formData);
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>
